<template>
  <el-table :data="list" class="tableData" border row-key="id" default-expand-all>
    <el-table-column label="序号" align="center" width="100">
      <template #default="scope">
        <el-input v-model.number="scope.row.sort" placeholder="排序" type="number" />
      </template>
    </el-table-column>
    <el-table-column prop="date" label="课时名称" min-width="230">
      <template #default="scope">
        <el-input v-model="scope.row.name" placeholder="请输入课时名称" />
      </template>
    </el-table-column>
    <el-table-column label="课程人数" width="100">
      <template #default="scope">
        <el-input :disabled="scope.row.limit" v-model="scope.row.courseAmount" placeholder="请输入课程人数" type="number" />
      </template>
    </el-table-column>
    <!-- <el-table-column prop="name" label="限制课程人数" align="center">
      <template #default="scope">
        <el-checkbox v-model="scope.row.limit" />
      </template>
    </el-table-column> -->
    <el-table-column label="折扣价格" align="center" width="120">
      <template #default="scope">
        <el-input v-model.number="scope.row.discountPrice" placeholder="折扣价格" type="number" />
      </template>
    </el-table-column>
    <el-table-column prop="name" label="课程标签" align="center" width="140">
      <template #default="scope">
        <curriculumTags v-model="scope.row.tag"></curriculumTags>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="默认选中" align="center" width="80">
      <template #default="scope">
        <el-checkbox v-model="scope.row.isDefault" />
      </template>
    </el-table-column>
    <el-table-column prop="name" label="是否展示" align="center" width="80">
      <template #default="scope">
        <el-switch v-model="scope.row.isShow" :active-value="1" :inactive-value="0" />
      </template>
    </el-table-column>
    <el-table-column prop="name" label="预报" align="center" width="80">
      <template #default="scope">
        <el-switch v-model="scope.row.estimateSignUp" :active-value="1" :inactive-value="0" />
      </template>
    </el-table-column>
    <el-table-column prop="name" label="预报价格" align="center" width="120">
      <template #default="scope">
        <el-input v-model.number="scope.row.signUpPrice" placeholder="预报价格" type="number" />
      </template>
    </el-table-column>
    <el-table-column prop="address" label="操作" align="center" width="120" fixed="right">
      <template #header>
        <el-button type="primary" size="small" circle @click="lessonContentAdd" icon="plus"></el-button>
      </template>
      <template #default="scope">
        <el-button size="small" type="primary" icon="Plus" circle @click="lessonContentAdd(scope.row)" />
        <el-button size="small" type="danger" icon="Delete" circle @click="lessonContentDel(scope.row)" />
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
//counter
import useCounterStore from "@/store/counter";
const counter = useCounterStore();
let props = defineProps(["modelValue"]);
const emit = defineEmits(["update:modelValue"]);

let tableData = ref([]);
let list = ref([]);

//新增课时内容
function lessonContentAdd(row) {
  let obj = {
    name: "",
    isDefault: true,
    courseAmount: null, //课程人数
    limit: false, //限制人数
    id: proxy.$utils.generateUUID(),
    parentId: "",
    isShow: 0, //是否展示
    discountPrice: null, //优惠价格
    sort: tableData.value.length + 1, //排序
    tag: null, //标签
    signUpPrice: null, //预报价格
    estimateSignUp: 0, //预报
  };
  if (row.id) obj.parentId = row.id;
  tableData.value.push(obj);
  console.log("新增课时内容", tableData.value);
}

//将多维数组拆成一维数组
function flattenArray(arr) {
  let result = [];
  arr.forEach((item) => {
    result.push(item);
    if (item.children) {
      result = result.concat(flattenArray(item.children));
      delete item.children; // 可选，如果不想改变原数组结构可以不删除 children
    }
  });
  return result;
}

function lessonContentDel(row) {
  let index = proxy.$utils.findIndexByField(tableData.value, "id", row.id);
  if (index != -1) tableData.value.splice(index, 1);
}

watch(
  () => props.modelValue,
  (newValue, oldValue) => {
    if (newValue) tableData.value = proxy.$utils.deepcopy(newValue);
  },
  { deep: true, immediate: true }
);

watch(
  () => tableData.value,
  (newValue, oldValue) => {
    if (newValue) {
      //设置tableData.value
      list.value = proxy.$utils.transformArray(
        proxy.$utils.deepcopy(newValue),
        "id",
        "parentId"
      );
    }
  },
  { deep: true, immediate: true }
);

watch(
  () => list.value,
  (newValue, oldValue) => {
    if (newValue) {
      let deepArr = proxy.$utils.deepcopy(newValue);
      let copyArr = proxy.$utils.deepcopy(props.modelValue);
      let oneArr = flattenArray(deepArr); //拆成一维数组

      if (!proxy.$utils.arraysAreEqual(copyArr, oneArr))
        emit("update:modelValue", oneArr);
    }
  },
  { deep: true, immediate: true }
);
</script>



<style lang="scss" scoped>
::v-deep.tableData {
  margin-top: 10px;
  .cell {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>






